<template>
	<div>
	<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
	<div style="position: relative;padding: 20px;">
		<Spin size="large" fix v-if="loadingshow"></Spin>
		<Row>
	       <Col span="12" style="text-align: left;margin-top:15px;font-size: 16px;">
	        	<span>批量学生导入：</span>
	        	<!--<Button type="ghost" @click="getdownload">批量模板下载</Button>-->
	        	<Button type="ghost" :loading="loading" @click="getdownload">
			        <span v-if="!loading">批量学生模板下载</span>
			        <span v-else>加载中</span>
			    </Button>
	       </Col>
	    </Row>
	    <Row>
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>年级筛选：</span>
	        	<RadioGroup v-model="selectgrade" type="button" @on-change="changeselect">
	        		<Radio v-for="item in gradelist" :key="item.value" :label="item.value">{{item.label}}</Radio>
			        
			    </RadioGroup>
			    <Spin size="large" fix v-if="gradelistshow"></Spin>
	        </Col>
	    </Row>
	    <!--<Row v-if="selectgrade">
	        <Col span="24" style="text-align: left;margin-top:15px;">
	        	<span>班级筛选：</span>
	        	<RadioGroup  v-model="classselect" type="button" @on-change="changeclassselect">
	        		<Radio v-for="item in classlist" :key="item.value" :label="item.value">{{item.label}}班</Radio>
			       
			    </RadioGroup>
			    <Spin size="large" fix v-if="classlistshow"></Spin>
	        </Col>
	    </Row>-->
		<Row>
	       <Col span="12" style="text-align: right;margin-top:15px;font-size: 16px;">
	        	<Upload
			        multiple
			        ref="upload"
			        :before-upload="handleUpload"
			        :on-success="uploadSuccess"
			        name="file"
			        type="drag"
			        :show-upload-list="false"
			        :headers="headers"
			        :data="senddata"
			        :action="actionUrl">
			        <div style="padding: 20px 0">
			            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
			            <p>点击或者拖拽文件到此处</p>
			        </div>
			    </Upload>
	        </Col>
	      
	    </Row>
	    <Row>
	       <Col span="12" style="text-align: left;margin-top:15px;font-size: 16px;">
			    <div v-for="(item, index) in file">文件: {{ item.name }} 
			        <Button @click="delectFile(item.keyID)" type="error" size="small" shape="circle" icon="close-round"></Button>
			        <Button style="margin-left:30px;"  v-if="index === 0" type="primary" @click="upload" >上传</Button>
			    </div>
			</Col>
	    </Row>
	    
	</div>
	</div>
</template>

<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage } from '@/components/js/Localstorage'
	export default{
		data(){
			return{
				loading: false,				//下载模板按钮上的加载中显示隐藏
				gradelistshow:false,		//控制年级选择条的加载中显示隐藏
				classlistshow:false,		//控制班级选择条的加载中显示隐藏
				loadingshow:false,			//全局（整个屏幕）的加载中显示隐藏
				
				classselect:"",				//选择班级的select
				selectgrade:"",				//选择年级的select
				
				file:[],
				uploadFile: [],
				actionUrl:"",
				headers: {
				    'Authorization' : ''
				},
				senddata:{
					gradeId:"",						//年级ID
//					id:"" 								//班级ID
				},
				
				gradelist: [
//					{value: '1',label: '全部'},
//					{value: '2',label: '初一'},
//                  {value: '3',label: '初二'},
//                  {value: '4',label: '初三'},
//                  {value: '5',label: '高一'},
//                  {value: '6',label: '高二'},
//                  {value: '7',label: '高三'},  
                ],
                classlist: [
//					{value: '1',label: '01班'},
//					{value: '2',label: '02班'},
//                  {value: '3',label: '03班'}, 
//                  {value: '4',label: '04班'},
//					{value: '5',label: '05班'},
//                  {value: '6',label: '06班'}, 
                ],
			}
		},
		created(){
			this.getgradelist()
		},
		methods:{
			handleUpload (file) { // 上传文件前的事件钩子
				if(this.selectgrade == "" ){
					this.$Message.error({
								content: '请先选择年级信息',
								duration: 10,
								closable: true
							});
					return;
				}
				
				this.actionUrl = api.apidomain + '/tqes/web/tchStudent/importStudentExcel/grade';
				let token = getsessionstorage("authorization");
				this.headers.Authorization = token;
				this.senddata.gradeId = this.selectgrade;
//				this.senddata.id = this.classselect;
//				//console.log(this.senddata)
				
				
			    // 选择文件后 这里判断文件类型 保存文件 自定义一个keyid 值 方便后面删除操作
			    let keyID = Math.random().toString().substr(2);
			    file['keyID'] = keyID;
			    // 保存文件到总展示文件数据里
			    this.file.push(file);
			    // 保存文件到需要上传的文件数组里
			    this.uploadFile.push(file)
			    // 返回 falsa 停止自动上传 我们需要手动上传
			    return false;
			},
			delectFile (keyID) { // 删除文件
//				//console.log(keyID);
			    // 删除总展示文件里的当前文件
			    this.file = this.file.filter(item => {
                    return item.keyID != keyID
                })
                this.uploadFile = this.uploadFile.filter(item => {
                    return item.keyID != keyID
                })
			},
			upload () { // 上传文件
				this.loadingshow = true;
			    for (let i = 0; i < this.uploadFile.length; i++) {
			        let item = this.file[i]
			        this.$refs.upload.post(item);
			    }
			},
			uploadSuccess (res, file,fileList) { // 文件上传回调 上传成功后删除待上传文件
				if(res.success == true){
						
						this.$Modal.success({
                            title: "导入详情",
                            content: res.data.importSuccess+'<br>'+res.data.importError
                       });
						this.loadingshow = false;
						this.$Message.success({
		                    content: '上传成功',
		                    duration: 10,
		                    closable: true
               			})
						this.file = [];
						this.uploadFile = [];
	            }
				if(res.success == false){
						this.loadingshow = false;
						this.$Message.error({
								content: res.msg,
								duration: 10,
								closable: true
							});
						this.file = [];
						this.uploadFile = [];
	            }
//			    //console.log(res.success)
//			    //console.log(file)
//			    //console.log(fileList)
			},
			changeselect:function(){
//				this.classselect = "";
//				this.getclasslist();
			},
			changeclassselect:function(){
//				//console.log(this.classselect)				
//				//console.log(this.selectgrade)
			},
			//获取年级选择列表
           	getgradelist:function(){
           		this.gradelistshow = true;
           		var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/getTchGradeSelect';
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
						
//						////console.log(response.data.data)
						self.gradelist = response.data.data
						self.gradelistshow = false;
		            }else if(response.data.success == false){
		            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});	
		            		self.gradelistshow = false;
		            	}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误：错误码00027',
							duration: 10,
							closable: true
						});
						self.gradelistshow = false;
					});
           	},
           	//获取班级级选择列表
//         	getclasslist:function(){
//         		this.classlistshow = true;
//         		var self = this;
//          	let url = api.apidomain+'/tqes/web/tchStudent/getTchClassesSelect';
//          	this.$http.post(url, {gradeId:this.selectgrade}).then(function(response) {
//					if(response.data.success == true){
//						
////						////console.log(response.data.data)
//						self.classlist = response.data.data
//						self.classlistshow = false;
//		            }else if(response.data.success == false){
//		            		self.$Message.error(response.data.msg);
//		            		self.classlistshow = false;
//		            	}
//					})
//					.catch(function(error) {
//						self.$Message.error('系统发生错误');
//						self.classlistshow = false;
//					});
//         	},
			getdownload:function(){
				this.loading = true;
				
				var self = this;
            	let url = api.apidomain+'/tqes/web/tchStudent/downLoadExcelTemplate';
            	this.$http.post(url, {}).then(function(response) {
					if(response.data.success == true){
//						////console.log(response.data.data)
						window.location.href = response.data.data;
						self.loading = false;
	            }else if(response.data.success == false){
	            		self.loading = false;
	            		self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
	            	}
	            	
				})
				.catch(function(error) {
					self.loading = false;
					self.$Message.error({
							content: '系统发生错误：错误码00028',
							duration: 10,
							closable: true
						});
				});
			}
		}
	}
</script>

<style>
</style>